// 导入 react
import React, { lazy } from "react";
// 导入 路由 router
import { Route } from "react-router-dom";
// 导入 antd-mobile 插件包
import { TabBar } from "antd-mobile";

// // 导入 Index
import Index from "../Index/";

// 导入样式包
import "./index.scss";
const HouseList = lazy(() => import("../HouseList"));
const News = lazy(() => import("../News"));
const Profile = lazy(() => import("../Profile"));

const TabBars = [
  { title: "首页", icon: "icon-ind", path: "/home" },
  { title: "找房", icon: "icon-findHouse", path: "/home/list" },
  { title: "资讯", icon: "icon-infom", path: "/home/news" },
  { title: "我的", icon: "icon-my", path: "/home/profile" }
];

class Home extends React.Component {
  state = {
    selectedTab: this.props.location.pathname
  };
  // 生命周期第二阶段更新阶段
  componentDidUpdate(prevProps) {
    //  参数 prevProps 表示更新前的 props
    // this.props 表示最新的 props
    //  判断 最新的 props 与 更新前的 props 是否相同
    const { pathname } = this.props.location;
    if (pathname !== prevProps.location.pathname) {
      this.setState({
        selectedTab: pathname
      });
    }
  }

  render() {
    // console.log(this.props);
    return (
      <div className="home">
        <Route exact path="/home" component={Index}></Route>
        <Route path="/home/list" component={HouseList}></Route>
        <Route path="/home/news" component={News}></Route>
        <Route path="/home/profile" component={Profile}></Route>

        <div className="tab-bar">
          {/* tintColor 选中的字体颜色 */}
          <TabBar tintColor="#21B97A">
            {TabBars.map(itme => (
              <TabBar.Item
                title={itme.title}
                key={itme.title}
                // icon 默认展示图片
                icon={<i className={`iconfont ${itme.icon} `}></i>}
                // 选中后的展示图片
                selectedIcon={<i className={`iconfont ${itme.icon}`}></i>}
                // selected 是否被选中
                selected={this.state.selectedTab === itme.path}
                // 点击事件
                onPress={() => {
                  // console.log(this.props);
                  this.setState({
                    selectedTab: itme.path
                  });
                  this.props.history.push(itme.path);
                }}
              ></TabBar.Item>
            ))}
          </TabBar>
        </div>
      </div>
    );
  }
}

export default Home;
